require("../../assets/css/reset.css");
// 引入公共样式
require("../../assets/css/basic.css");
// 引入矢量图
require("../../assets/fonts/iconfont.css");
// 引入当前页面的样式
require('./mine_sports_data.less');

// 引入dom
const dom = require("../../utils/dom.js");
// 引入axios模块
const axios = require("../../utils/axios.js");
// 引入echarts
import * as echarts from 'echarts';

document.addEventListener("DOMContentLoaded", async function(){
    // 1.渲染数据
    let res = await axios.get("/api/exercise");
    let {days,sum7Calorie,sum7Duration,sum7Meter} = res.data.data;
    dom.get(".duration").textContent = sum7Duration;  //总运动
    dom.get(".calorie").textContent = sum7Calorie;  //本周消耗卡路里
    dom.get(".meter").textContent = sum7Meter;  //里程（米）
    dom.get(".total").textContent = days.length;  //累计（天）
    dom.get(".continuous").textContent = days.length;  //连续（天）
    // console.log(res)

    // 2.渲染头像
    let img = await axios.get("/api/user/info");
    // dom.get(".my-sports img").src = axios.defaults.baseURL + img.data.data.imgUrl;
    
    // 3.绘制图表1
    // 基于准备好的dom，初始化echarts实例
    let date = days.map(v => v.date.slice(5));  //日期
    let sumDuration7 = days.map(v => v.sumDuration);  //运动时长
    var myChart1 = echarts.init(dom.get(".chart1"));
    myChart1.setOption({
        // 标题
        title: {
            text: '近7天运动时长',
            left: "20",
            top:"15",
        },
        // 网格布局
        grid:{
            top: "65",
            left: "50",
            width: "250",
            height: "100",
        },
        // X轴
        xAxis: {
            type: 'category',
            data: date,
        },
        // Y轴
        yAxis: {
        type: 'value'
        },
        //数组序列
        series: [
        {
            data: sumDuration7,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
            }
        }
        ],
        // 颜色
        color: ["#83a7d1"],
    });

    // 4.绘制图表2
    let daysArr = res.data.data.days;
    let duration = 0;  //跑步时长
    let meter = 0;  //骑行时长
    let calorie = 0;  //训练时长
    daysArr.forEach(v => {
      duration += Math.floor((v.sumDuration)/100);
      meter += Math.floor((sum7Meter)/100);
      calorie += Math.floor((sum7Calorie)/100);
    });
    var myChart2 = echarts.init(dom.get(".chart2"));
    myChart2.setOption({
      title: {
          text: '运动分类',
          left: "20",
          top:"15",
        },
        tooltip: {
          top:"20",
        },
        legend: {
          top: 'middle',
          left: "20",
          orient: "vertical"
        },
        series: [
          {
            name: '运动分类',
            type: 'pie',
            radius: '80%',
            left: "50",
            data: [
              { value: duration/100, name: '跑步' },
              { value: meter/100, name: '骑行' },
              { value: calorie/100, name: '训练' },
            ],
            label:{
              position: "inner",
              color:"#fff",
              formatter: "{d}%",
              fontSize: "16px",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ["#736171", "#ee5c43", "#58bb92"],
    });

    // 5.绘制图表3
    daysArr.forEach(v => {
      let durationDay = v.sumDuration;
      let meterDay = v.sumDuration;
      let calorieDay = v.sumDuration;
    });
    var myChart3 = echarts.init(dom.get(".chart3"));
    myChart3.setOption({
      title: {
        text: '近7天运动分类',
        left: "20",
        top:"15",
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        right: "0",
        top: "center",
        orient: "vertical",
        itemWidth : "15",
        align: "vertical",
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        width:"300",
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: date,
      },
      series: [
        {
          name: '跑步',
          type: 'bar',
          stack: 'total',
          label: {
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          name: '骑行',
          type: 'bar',
          stack: 'total',
          label: {
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '训练',
          type: 'bar',
          stack: 'total',
          label: {
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
      ],
      color:["#588fd4", "#91cddd", "#93d14f"],
    });
})